<template>
  <view class="template-collect tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    
    <view v-if="news.length>0" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view class="" style="margin-bottom: 120rpx;">
		  <tn-swipe-action >
        <tn-swipe-action-item @click="testAction" v-for="(item, index) in news" :key="item.id" :name="index" :options="methodToExecute === 'method1' ? options : []">
          <view class="tn-margin tn-padding-bottom-sm" @click.stop="tn('/circlePages/king?userId='+item.likeUserId)">
            <view class="tn-flex">
			  <view class="image-pic tn-shadow-blur tn-margin-right-sm" v-if="item.url" :style="'background-image:url(' + item.url + ')'">
			      <view class="image-article">  
			      </view>  
			  </view>  
			 
              <view class="tn-margin-left-sm tn-margin-top-xs" style="width: 100%;">
                <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				  {{ item.likeUserName? (item.likeUserName === 0 ? '保密' : item.likeUserName) : '保密' }}
                </view>
                <view class="tn-padding-top-xs" style="min-height: 105rpx;">
                  <text class='tn-icon-vip-text' v-if="item.ifVip !== 0"></text>
                  <text class='purple-text-2' v-if="item.ifVip === 0"></text>
				  <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
				    {{ item.starSign? (item.starSign === 0 ? '保密' : item.starSign) : '保密' }}  |  {{ item.marriageHistory === 1 ? '离异' : '未婚' }}
				  </text>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between">
					<text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
					  {{ item.age }}岁  |  {{ item.height ? (item.height === 0 ? '保密' : `${item.height}cm`) : '保密' }}  |  {{ item.jobNature? (item.jobNature === 0 ? '保密' : item.jobNature) : '保密' }}
					</text>
                  <!-- <view v-for="(label_item,label_index) in item.label" :key="label_index"
                    class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
                    <text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
                  </view>
                  <view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled" style="padding-top: 5rpx;">
                    <text class="tn-icon-footprint tn-padding-right-xs tn-text-lg"></text>
                    <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
                    <text class="tn-icon-like tn-padding-right-xs tn-text-lg"></text>
                    <text class="tn-text-df">{{ item.likeCount }}</text>
                  </view> -->
                </view>
              </view>
            </view>
          </view>
        </tn-swipe-action-item>
		</tn-swipe-action>
      </view>
      
    </view>
	<view v-else-if="news.length==0">
		<view style="text-align: center;font-size: 12px;padding-top: 130px;">
			<view>
				<img src="/static/img/logo2.png" style="width: 100px;height: 84px;margin-bottom: 16px;opacity: 0.6;"/>
			</view>
			<view>
				<text style="color: #797171;">暂无数据，请前往首页添加~</text>
			</view>
		</view>
	</view>
  </view>
	
  
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import request from "@/common/request.js"
  export default {
    name: 'TemplateCollect',
    mixins: [template_page_mixin],
    data(){
      return {
         news: [this.news],
		 methodToExecute: '', // 添加 methodToExecute 以确定执行的方法
		 options: [
		   {
		     icon: 'delete',
		     style: {
		       backgroundColor: '#E83A30',
		       width: '80rpx',
		       height: '80rpx',
		       margin: '0 12rpx',
		       borderRadius: '100rpx'
		     }
		   },
		 ],
      }
    },
	onLoad: function(options) {
	    // 页面加载时执行的方法
		// 通过 options 参数获取传递的参数
		    this.methodToExecute = options.method;
			
		    // 根据参数执行不同的方法
		    switch (this.methodToExecute) {
		      case 'method1':
		        this.method1();
		        break;
		      case 'method2':
		        this.method2();
		        break;
		    }
		  },
    methods: {	
		method1: function() {
		    console.log('执行我喜欢的方法');
			this.likeUserList();
		  },
		
		method2: function() {
		    console.log('执行喜欢我的');
			this.likeMeList();
		  },
		likeUserList(){
			request.get("friend/wx/personal/likeUserList",{}).then(res=>{
						  let _data = res[1]['data']
						  console.log(_data.code)
						  if(_data.code == 20000){
							  console.log(_data)
							  this.news = _data.data
							  console.log(this.news)
							  //return this.news
							  }
						  // }else if(_data.code == 401){
							 //  this.turnLogin()
						  // }
			});
		},
		likeMeList(){
			request.get("friend/wx/personal/likeMeList",{}).then(res=>{
						  let _data = res[1]['data']
						  console.log(_data.code)
						  if(_data.code == 20000){
							  console.log(_data)
							  this.news = _data.data
							  console.log(this.news)
							  //return this.news
							  }
						  // }else if(_data.code == 401){
							 //  this.turnLogin()
						  // }
			});
		},
		testAction(e){
			
			
			if(e.type == 'button'){
				let _t = this
				// 删除我喜欢的人
				request.delete("friend/wx/member/"+this.news[e.name].id).then(res=>{
					let _data = res[1]['data']
					if(_data.code == 20000){
						_t.$delete(_t.news, e.name)
					}
				})
			}
		},
		
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  /* 资讯主图 start*/
  .image-article {
    border-radius: 8rpx;
    border: 1rpx solid #F8F7F8;
    width: 180rpx;
    height: 200rpx;
    position: relative;
  }
  
  .image-pic {
    width: 200rpx;
    height: 200rpx;
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }
  
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 35rpx;
      padding: 5rpx 25rpx;
  
      &--prefix {
        padding-right: 10rpx;
      }
    }
  }
  .tn-icon-vip-text {
        color: purple; 
  		font-size: 30px;
      }
	.purple-text-2 {
  	    color: purple; 
  	  	font-size: 8px;
  	}
</style>
